<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
  </head>

  <body style="padding: 15px">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">图书表格</h3>
      </div>
      <div class="panel-body form-inline">
        <form id="bookForm">
          <div class="input-group">
            <div class="input-group-addon">书名</div>
            <input
              type="text"
              class="form-control"
              name="bookname"
              placeholder="请输入书名"
            />
          </div>
          <div class="input-group">
            <div class="input-group-addon">作者</div>
            <input
              type="text"
              class="form-control"
              name="author"
              placeholder="请输入作者"
            />
          </div>
          <div class="input-group">
            <div class="input-group-addon">出版社</div>
            <input
              type="text"
              class="form-control"
              name="publisher"
              placeholder="请输入出版社"
            />
          </div>
          <button id="btnAdd" class="btn btn-primary">添加</button>
          <button id='sieve'>筛选</button>
        </div>
      </form>
    </div>

    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tb">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td><a href="#" ></a></td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./lib/form-serialize.js"></script>
    <!-- <script src="./js/index.js"></script> -->

    <script>
      axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net'
      // 获取元素
      const tbady = document.querySelector('#tb');
      const form = document.querySelector('#bookForm');
      const tb = document.querySelector('#tb');

      const but = document.querySelector('#sieve');


      // 封装函数
      const redering = (da) =>{

        axios.get('/api/getbooks',da).then(({data:res})=>{
          
          const {data} = res
          console.log(data);
          tb.innerHTML = data.map(item=>{
            return `
            <tr>
              <td>${item.id}</td>
              <td>${item.bookname}</td>
              <td>${item.author}</td>
              <td>${item.publisher}</td>
              <td><a href="#" data-id="${item.id}">删除</a></td>
            </tr>
            `
          }).join('')

        })
      }

      redering()

      // 添加数据

      form.addEventListener('submit',function(e){
        e.preventDefault()

        const fd = serialize(form,{hash:true})
       
        axios.post('/api/addbook',fd).then(({data:res})=>{
          redering()
          this.reset()
        })

      })


      // 删除
      tb.addEventListener('click',function(e){
        if(e.target.tagName==='A'){
          
          const id = e.target.dataset.id
          axios.get('/api/delbook?id='+id).then(({data:res})=>{
            
            redering()
          })
        }
      })


      // 筛选
      but.addEventListener('click',function(e){
        e.preventDefault()

        const fd = serialize(form,{hash:true})
       
        const obj = {
          bookname:fd.bookname,
          author:fd.author,
          publisher:fd.publisher
        }
        const dd = {params:obj}
        
        redering(dd)
      })


    </script>
  </body>
</html>
